import React from 'react'
import MobileNavigator from '../components/MobileNavigator'
import MobileMyBanner from '../components/MobileBanner'
import MobileMyAvatar from '../components/MobileMyAvatar'
import Kefu from '../components/Kefu'
import MobileCopyright from '../components/MobileCopyright'
import Info from '../components/Info'
import order from '../styles/Order.module.scss'
function MobileOrderList() {
  return (
    <>
      {/* 顶部banner */}
      <MobileMyBanner />
      {/* 导航 */}
      <MobileNavigator />
      {/* 头像 */}
      <MobileMyAvatar />
      {/* 主体 */}
      <div className="container" style={{ marginBottom: '0vw' }}>
        <Info />
        {/* 没有订单 */}
        <p className={order.noOrder}>当前账号下无历史订单记录。</p>
        <div
          className={order.orderList}
          style={{ height: '52vh', overflow: 'auto' }}
        >
          <div className={order.orderContainer}>
            <div className={order.orderHd}>
              <span>购买角色</span>
              <span>实付金额</span>
              <span>订单状态</span>
              <span>操作提示</span>
            </div>
            <div className={order.orderItem}>
              <span>角色名称</span>
              <span>RMB 1500.00</span>
              <span>待支付</span>
              <span>
                <a href="javascript:;">提醒发货</a>
              </span>
            </div>
            <div className={order.orderItem}>
              <span>角色名称</span>
              <span>RMB 1500.00</span>
              <span>待支付</span>
              <span>
                <a href="javascript:;">提醒发货</a>
                <span>/</span>
                <a href="javascript:;">取消支付</a>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div className={order.warn}>
        搜索仅限于最近的50条订单记录。如果您对之前的订单有任何疑问，或者遇到游戏充值支付问题，
        <br />
        请联系客服，获取详细帮助。
      </div>
      <Kefu />
      <MobileCopyright />
    </>
  )
}

export default MobileOrderList
